<template>
  <div>
    <el-tabs v-model="activeName" @tab-click="handleClick">
      <el-tab-pane label="锯切" name="1"></el-tab-pane>
      <el-tab-pane label="剪切" name="2"></el-tab-pane>
    </el-tabs>
    <div style="margin-bottom: 20px;text-align: right;">
      <span style="margin-right: 40px;">出材率: 88%</span>
      <el-button type="primary">一键分配</el-button>
    </div>

    <el-table v-loading="loading" ref="multipleTable" :data="tableData" tooltip-effect="dark">
      <el-table-column label="序号" width="55" align="center">
        <template slot-scope="scope">{{ scope.$index + 1 }}</template>
      </el-table-column>
      <el-table-column prop="specifications" label="规格" align="center"></el-table-column>
      <el-table-column prop="length" label="原材长度(mm)" align="center" width="120"></el-table-column>
      <el-table-column prop="numberOfRoots" label="原材根数" align="center"></el-table-column>
      <el-table-column label="剪切方案" align="center">
        <template slot-scope="scope">
          <img style="width: 100%;cursor: pointer;" :src="scope.row.diagram" alt="" @click="imgClick">
        </template>
      </el-table-column>
      <el-table-column prop="workArea" label="切断设备" align="center"></el-table-column>
      <el-table-column label="简图" align="center">
        <template slot-scope="scope">
          <img style="width: 100%;cursor: pointer;" :src="scope.row.diagram" alt="" @click="imgClick">
        </template>
      </el-table-column>
      <el-table-column prop="workArea" label="工艺" align="center"></el-table-column>
      <el-table-column prop="workArea" label="弯曲设备" align="center"></el-table-column>
      <el-table-column prop="numberOfRoots" label="根数" align="center"></el-table-column>
      <el-table-column prop="length" label="长度(mm)" align="center" width="120"></el-table-column>
      <el-table-column prop="workArea" label="工区" align="center"></el-table-column>
      <el-table-column prop="number" label="料单编号" align="center"></el-table-column>
      <el-table-column prop="subItem" label="分部分项" align="center"></el-table-column>
      <el-table-column prop="materialListName" label="料单名称" align="center"></el-table-column>
      <el-table-column prop="componentName" label="构件名称" align="center"></el-table-column>
      <el-table-column prop="serialNumber" label="料单序号" align="center"></el-table-column>
    </el-table>

    <open-img-dialog ref="openImgDialog" />
  </div>
</template>

<script>
import openImgDialog from './open-img-dialog.vue'

export default {
  name: "",
  components: { openImgDialog },
  props: {},
  data() {
    return {
      activeName: '1',

      loading: false,
      tableData: [
        {
          workArea: '工区1',
          number: 'LD123',
          subItem: '工区1-6#楼',
          materialListName: '料单名称1',
          componentName: '1#TL1',
          serialNumber: '1',
          specifications: 'φ10',
          diagram: require("@/assets/temporary-images/g1.png"),
          length: 540,
          numberOfRoots: 2,
          remarks: '上1排',
        },{
          workArea: '工区1',
          number: 'LD123',
          subItem: '工区1-6#楼',
          materialListName: '料单名称1',
          componentName: '1#TL1',
          serialNumber: '1',
          specifications: 'φ10',
          diagram: require("@/assets/temporary-images/g1.png"),
          length: 540,
          numberOfRoots: 2,
          remarks: '上1排',
        },{
          workArea: '工区1',
          number: 'LD123',
          subItem: '工区1-6#楼',
          materialListName: '料单名称1',
          componentName: '1#TL1',
          serialNumber: '1',
          specifications: 'φ16',
          diagram: require("@/assets/temporary-images/g1.png"),
          length: 160,
          numberOfRoots: 2,
          remarks: '上1排',
        },{
          workArea: '工区1',
          number: 'LD123',
          subItem: '工区1-6#楼',
          materialListName: '料单名称1',
          componentName: '2#TL2',
          serialNumber: '1',
          specifications: 'φ16',
          diagram: require("@/assets/temporary-images/g1.png"),
          length: 160,
          numberOfRoots: 2,
          remarks: '上1排',
        },
      ],

      assignDevicesData: {}
    };
  },
  filters: {},
  computed: {},
  watch: {},
  created() {},
  mounted() {},
  beforeDestroy() {},
  methods: {
    reset() {
      console.log('重置')
    },
    deliveryData() {
      this.assignDevicesData = {
        tableData: this.tableData
      }
      this.$emit('assignDevicesData', this.assignDevicesData)
    },
    imgClick() {
      this.$refs.openImgDialog.add()
    },
    handleClick(tab, event) {
      console.log(tab, event);
    }
  },
};
</script>

<style scoped lang="scss"></style>
